<template>
  <div class="all-payment-record flex-auto">
    <div class="flex align-center justify-content-space-between" style="margin-bottom: 20px">
      <div class="title">全体党员缴费记录</div>
      <div class="flex" >

        <el-select style="width: 160px" v-model="payRecord.pbCommitteeId" placeholder="请选择支部" clearable>
          <el-option v-for="item in branchList" :key="item.id" :label="item.committeeName" :value="item.id"></el-option>
        </el-select>

        <el-select style="width: 160px;margin: 0 10px" v-model="payRecord.pbFeeStateId" placeholder="请选择支付状态" clearable>
          <el-option v-for="(item,index) in feeStatusList" :key="index" :label="item.pbFeeStateName" :value="item.pbFeeStateId"></el-option>
        </el-select>

        <div class="flex-auto search-input-box flex align-center" style="width: 220px">
          <el-select v-model="payRecord.cpcUserName"  filterable placeholder="搜索党员姓名"  value-key="id" collapse-tags  clearable style="margin-right: 10px">
            <el-option v-for="(item,index) in meetingList" :key="index" :label="item.pbUserName" :value="item.pbUserName"/>
          </el-select>
          <el-button class="search-button" icon="Search" type="primary" @click="getCancerIndicatorList">搜索</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
   <div class="flex">
     <div style="margin-right: 10px" class="flex-auto">
       <el-table :data="recordsList" style="width: 100%" max-height="300px">

         <el-table-column prop="pbUserName" label="党员姓名"  align="center"  width="150px">
           <template #default="{ row }">
             <div class="flex ">
               <div class="avatar">{{ row.pbcpcInfo.pbUserName.charAt(0) }}</div>
               <div style="flex: 1;">
                 <div style="font-weight: bold; color: #333;">{{ row.pbcpcInfo.pbUserName }}</div>
                 <div style="color: #999; font-size: 12px;">{{ getPositionName(row.pbcpcInfo.pbPositionId) }}</div>
               </div>
             </div>
           </template>
         </el-table-column>

         <el-table-column prop="committeeName" label="所属支部"  align="center">
           <template #default="{ row }">
             <div>{{ row.pbcpcInfo.pbCommittee.committeeName }}</div>
           </template>
         </el-table-column>

         <el-table-column prop="pbfFeeLimit" label="应缴金额"  align="center">
           <template #default="{ row }">
             <div>￥{{ row.pbfFeeLimit }}</div>
           </template>
         </el-table-column>

         <el-table-column prop="pbfFeeState" label="状态" align="center">
           <template #default="{ row }">
             <div class="status-tag" :class="getStatusClass(row.pbfFeeState)">
               {{ getStatusText(row.pbfFeeState) }}
             </div>
           </template>
         </el-table-column>
       </el-table>
     </div>

   </div>
    <div style="position:relative;">
      <pagination :total="payRecord.totalCount" v-model:page="payRecord.pageNumber" v-model:limit="payRecord.pageSize" @pagination="getCancerIndicatorList" /></div>
  </div>
</template>

<script setup>
import { ElButton } from 'element-plus'
import 'element-plus/dist/index.css'
import {User, Lock, Phone, Search} from '@element-plus/icons-vue';
import {ref} from "vue";
import {getFeeStatusList, getPBFeeInfo} from "@/api/cost/cost.js";
import {getPBCommitteeList, getPBCPCInfoList, getPBPositionList} from "@/api/partyMemberInfo/partyMemberInfo.js";
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const feeStatusList = ref([]);  // 获取缴纳状态列表
const branchList = ref([]);  // 支部信息
const meetingList = ref([]); // 党员信息
const positionList = ref([]); // 职位信息
const recordsList = ref([]); // 表格数据
const getStatusText = (statusValue) => {
  switch (statusValue) {
    case 0:
      return '已缴费';
    case 1:
      return '部分缴费';
    case 2:
      return '未缴费';
    default:
      return '未知缴费';
  }
};
const getStatusClass = (statusValue) => {
  switch (statusValue) {
    case 2: // 未缴费
      return 'status-unpaid';
    case 1: // 部分缴费
      return 'status-partial';
    case 0: // 已缴费
      return 'status-paid';
    default:
      return '';
  }
};

const payRecord = ref({
  pageNumber: 1, // 页码
  userId: '',  // 用户id
  pbCommitteeId:'', // 支部id
  pbFeeStateId:'', // 缴纳状态标识
  cpcUserName: '', // 党员名称
  totalCount:0,
  pageSize:10
});

// 获取申请党费数据
const getFeeStatus= async () => {
  try {
    let result = await getFeeStatusList();
    if (result.status == 200 && result.data.code == 200){
      let data = result.data.data;
      feeStatusList.value = data;
    }
  } catch (error) {
    console.error("获取数据失败", error);
  }
}
// 获取支部信息
const getPBCommittee = async () => {
  let result = await getPBCommitteeList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    branchList.value = data
  }
}
// 获取党员信息列表
const getPBCPCList = async () => {
  let result = await getPBCPCInfoList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    meetingList.value = data.items;
  }
}
// 获取职务信息
const getPBPosition = async () => {
  let result = await getPBPositionList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    positionList.value = data;
  }
}
// 获取缴费记录数据
const getFeeList= async (reqData) => {
  try {
    reqData.userId = userStore.id;
    const params = {
      pageNumber: reqData.pageNumber, // 页码
      userId: reqData.userId,  // 用户id
      pbCommitteeId:reqData.pbCommitteeId, // 支部id
      pbFeeStateId:reqData.pbFeeStateId, // 缴纳状态标识
      cpcUserName: reqData.cpcUserName, // 党员名称
      pageSize:reqData.pageSize
    };
    let result = await getPBFeeInfo(params);
    if (result.status == 200 && result.data.code == 200){
      let data = result.data.data;
      if (Array.isArray(data.items)) {
         recordsList.value = data.items;
         payRecord.value.totalCount = data.totalCount;
      }
    }
  } catch (error) {
    console.error("获取数据失败", error);
  }
}
const getPositionName = (positionId) => {
  const position = positionList.value.find(item => item.id == positionId);
  return position ? position.positionName : '';
}
const getCancerIndicatorList = (pageData)=>{  // 缴费记录分页
   payRecord.value.pageNumber = pageData.page;
   payRecord.value.pageSize = pageData.limit;
   getFeeList(payRecord.value);
}

getPBPosition();
getPBCommittee();
getFeeStatus();
getPBCPCList();
getFeeList(payRecord.value);



</script>

<style scoped lang="scss">
.all-payment-record{
  margin-top: 20px;
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 10px;
  .title{
    font-size: 18px;
    color: #333333;
    font-weight: bolder;
  }
  .search{
    margin-right: 10px;
  }
  .avatar{
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #E5E7EB;
    border-radius: 50%;
    font-size: 16px;
    color: #333333;
  }



  .status-unpaid {
    background-color: #FEE2E2;
    color: #A12C2C;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bolder;
    margin: 0 auto;
  }

  .status-partial {
    background-color: #FEF9C3;
    color: #A27639;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bolder;
    margin: 0 auto;
  }

  .status-paid {
    background-color: #DCFCE7;
    color: #2E7749;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bolder;
    margin: 0 auto;
  }
}
</style>
